<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{counter}}</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter&#45;&#45;">-</button>-->
<!--  <button v-on:click="increment">+</button>-->
<!--  <button v-on:click="decrement">-</button>-->
<!--  事件调用的方法没有参数-->
  <button @click="increment()">+</button>
  <button @click="decrement">-</button>
<!--  在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，
vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
  <button @click="btn2Click">按钮三</button>
</div>
<script src = '../../project_practice/lunbotu/vue.js'> </script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      },
      btn2Click(event){
        console.log('----------------',event)
      }
    }
  })
</script>
</body>
</html>